{% load navigation_tags %}
{% load display_tags %}
{% load authorization_tags %}
{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>
            {% if request.session.dojo_breadcrumbs and not product_tab.tab %}
                {% with request.session.dojo_breadcrumbs|last as last %}
                    {{ last.title }} |
                {% endwith %}
            {% elif product_tab.title %}
                {{ product_tab.title }} |
            {% endif %}
            DefectDojo
        </title>
        {% block add_css_before %}
        {% endblock %}

        <!-- jQuery -->
        <script src="{% static "jquery/dist/jquery.min.js" %}"></script>
        <!--  jQuery UI -->
        <script src="{% static "jquery-ui/dist/jquery-ui.min.js" %}"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="{% static "bootstrap/dist/js/bootstrap.min.js" %}"></script>
        <!-- Bootstrap Select -->
        <script src="{% static "bootstrap-select/dist/js/bootstrap-select.min.js" %}"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="{% static "metismenu/dist/metisMenu.min.js" %}"></script>

        <script src="{% static "chosen-js/chosen.jquery.min.js" %}"></script>

        <!-- Custom Theme JavaScript -->
        <script src="{% static "startbootstrap-sb-admin-2/dist/js/sb-admin-2.js" %}"></script>
        <!-- Calendar JavaScript -->
        <script src="{% static "moment/min/moment.min.js" %}"></script>
        <script src="{% static "fullcalendar/dist/fullcalendar.min.js" %}"></script>
        <!-- jquery cookie -->
        <script src="{% static "jquery.cookie/jquery.cookie.js" %}"></script>
        <!-- DataTables Javascript -->
        <!-- DataTables core (required) -->
        <script src="{% static 'datatables.net/js/dataTables.min.js' %}"></script>
        <!-- DataTables with Bootstrap styling (integration) -->
        <script src="{% static 'datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
        <!-- DataTables Buttons extension (core) -->
        <script src="{% static 'datatables.net-buttons/js/dataTables.buttons.min.js' %}"></script>
        <!-- DataTables Buttons Bootstrap integration -->
        <script src="{% static 'datatables.net-buttons-bs/js/buttons.bootstrap.min.js' %}"></script>
        <!-- Other Buttons extensions -->
        <script src="{% static 'datatables.net-buttons/js/buttons.html5.min.js' %}"></script>
        <script src="{% static 'datatables.net-buttons/js/buttons.colVis.min.js' %}"></script>
        <script src="{% static 'datatables.net-buttons/js/buttons.print.min.js' %}"></script>
        <!-- ColReorder extension -->
        <script src="{% static 'datatables.net-colreorder/js/dataTables.colReorder.min.js' %}"></script>

        <script src="{% static "pdfmake/build/pdfmake.min.js" %}"></script>
        <script src="{% static "pdfmake/build/vfs_fonts.js" %}"></script>

        <script src="{% static "jszip/dist/jszip.min.js" %}"></script>

        <!-- Bootstrap Core CSS -->
        <link href="{% static "bootstrap/dist/css/bootstrap.min.css" %}" rel="stylesheet">

        <!-- Bootstrap Select -->
        <link href="{% static "bootstrap-select/dist/css/bootstrap-select.min.css" %}" rel="stylesheet">

        <!-- MetisMenu CSS -->
        <link href="{% static "metismenu/dist/metisMenu.min.css" %}" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="{% static "startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" %}" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="{% static 'fontawesomefree/css/fontawesome.min.css' %}" rel="stylesheet" type="text/css">
        <link href="{% static 'fontawesomefree/css/brands.min.css' %}" rel="stylesheet" type="text/css">
        <link href="{% static 'fontawesomefree/css/solid.min.css' %}" rel="stylesheet" type="text/css">

        {% block add_css %}
        {% endblock %}
        <link rel="stylesheet" href="{% static "jquery-ui/dist/themes/flick/jquery-ui.min.css" %}">
        <link rel="shortcut icon" type="image/png" href="{% static "dojo/img/favicon.png" %}"/>
        <link rel="stylesheet" href="{% static "chosen-bootstrap/chosen.bootstrap.min.css" %}">
        <link rel="stylesheet" href="{% static "fullcalendar/dist/fullcalendar.min.css" %}">
        {% block dojo_css %}
            <link rel="stylesheet" href="{% static "dojo/css/dojo.css" %}">
        {% endblock %}
        <link rel="stylesheet" href="{% static "datatables.net-bs/css/dataTables.bootstrap.min.css" %}">
        <link rel="stylesheet" href="{% static "datatables.net-buttons-bs/css/buttons.bootstrap.min.css" %}">

        <style>
            {% block add_styles %}
            {% endblock %}
        </style>
    </head>
    <body class="{% dojo_body_class %}">
        {% block pre_wrapper %}
        {% endblock pre_wrapper %}
        <div id="wrapper">
            {% block navigation %}
                <!-- Navigation -->
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="{% url 'home' %}">
                        {% block header_logo %}
                            <div style="padding: 10px;">
                                <img src="{% static "dojo/img/logo.png" %}" alt="DefectDojo Logo" width="240"/>
                            </div>
                        {% endblock %}
                        </a>

                    </div>
                    <!-- /.navbar-header -->

                    <ul class="nav navbar-top-links navbar-right">
                        {% if request.user.is_authenticated %}
                            <li>
                                <div class="custom-search-form">
                                    <form id="custom_search_form" role="search" method="get" action="{% url 'simple_search' %}">
                                        <div class="input-group">
                                            <input id="simple_search" label="simple_search" aria-label="simple_search" type="text" name="query" class="form-control"
                                                placeholder="{% trans "Search" %}..." value="{{clean_query}}">
                                            <span class="input-group-btn">
                                                <button id="simple_search_submit" class="btn btn-primary" type="submit" aria-label="Search">
                                                    <i class="fa-solid fa-magnifying-glass"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                                <!-- /input-group -->
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle dropdown-toggle-alerts dropdown-toggle-h{{ alert_count }}" data-toggle="dropdown" href="#" aria-expanded="false" aria-label="{{ alert_count }} Alerts">
                                    <i class="fa-solid fa-bell fa-fw"></i>
                                    <span id="alert_count" class="badge badge-count badge-count{{ alert_count }}">{{ alert_count }}</span>
                                    <i class="fa-solid fa-caret-down"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-alerts">
                                </ul>
                                <!-- /.dropdown-alerts -->
                            </li>
                        {% endif %}
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" aria-label="User Menu">
                                <i class="fa-solid fa-user fa-fw"></i>
                                <i class="fa-solid fa-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                {% block settings-dropdown-items %}
                                    {% if request.user.is_authenticated %}
                                        <li>
                                            <a href="{% url 'view_profile' %}">
                                                <i class="fa-solid fa-user fa-fw"></i>
                                                {{ request.user.username }}
                                            </a>
                                        </li>
                                        {% if API_TOKENS_ENABLED %}
                                          <li>
                                              <a href="{% url 'api_v2_key' %}">
                                                <i class="fa-solid fa-key fa-fw"></i>
                                                  {% trans "API v2 Key" %}
                                              </a>
                                          </li>
                                        {% endif %}
                                    {% endif %}
                                    <li>
                                        <a href="{% url 'swagger-ui_oa3' %}" target="_blank">
                                            <i class="fa-solid fa-book fa-fw" title="OpenAPI v3 Docs"></i>
                                            {% trans "API v2 OpenAPI3 Docs" %}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ DOCUMENTATION_URL }}" target="_blank">
                                            <i class="fa-solid fa-circle-question fa-fw"></i>
                                            {% trans "Documentation" %}
                                        </a>
                                    </li>
                                {% endblock %}
                                {% if request.user.is_authenticated %}
                                    {% if SAML2_LOGOUT_URL != '' %}
                                        <li>
                                            <a href="{{ SAML2_LOGOUT_URL }}">
                                                <i class="fa-solid fa-right-from-bracket fa-fw"></i>
                                                {% trans "SAML Logout" %}
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% if CREATE_CLOUD_BANNER %}
                                        <li>
                                            <a href="https://cloud.defectdojo.com/accounts/onboarding/plg_step_1">
                                                <i class="fa-solid fa-level-up fa-fw"></i>
                                                {% trans "Try Pro for Free!" %}
                                            </a>
                                        </li>
                                    {% endif %}
                                    <li>
                                        <a href="{% url 'logout' %}">
                                            <i class="fa-solid fa-right-from-bracket fa-fw"></i>
                                            {% trans "Logout" %}
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                            <!-- /.dropdown-user -->
                        </li>
                        <!-- /.dropdown -->
                    </ul>
                    <!-- /.navbar-top-links -->

                    {% if request.user.is_authenticated %}
                        <div class="navbar-default sidebar navbar-fixed-top" role="navigation">
                            <div class="sidebar-nav navbar-collapse">
                                <ul class="nav" id="side-menu">
                                    {% block sidebar-items %}
                                        <li>
                                            <a href="{% url 'dashboard' %}" aria-disabled="true" aria-expanded="false" aria-label="Dashboard">
                                                <i class="fa-solid fa-gauge fa-fw"></i>
                                                <span>{% trans "Dashboard" %}</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a id="product-side-menu" href="{% url 'product' %}" aria-expanded="false" aria-label="{{ labels.ASSET_PLURAL_LABEL }}">
                                                <i class="fa-solid fa-list-ul fa-fw"></i>
                                                <span>{{ labels.ASSET_PLURAL_LABEL }}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a>
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'product' %}">
                                                        {{ labels.ASSET_ALL_LABEL }}
                                                    </a>
                                                </li>
                                                {% if request.user|can_add_product %}
                                                    <li>
                                                        <a href="{% url 'new_product' %}">
                                                            {{ labels.ASSET_CREATE_LABEL }}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                <li>
                                                    <a href="{% url 'product_type' %}">
                                                        {{ labels.ORG_ALL_LABEL }}
                                                    </a>
                                                </li>
                                                {% if "Product_Type_Add"|has_global_permission %}
                                                    <li>
                                                        <a id="pop-out-add-product-type" href="{% url 'add_product_type' %}">
                                                            {{ labels.ORG_CREATE_LABEL }}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                            <!-- /.nav-second-level -->
                                        </li>
                                        <li>
                                            <a href="{% url 'engagement' %}" aria-expanded="false" aria-label="Engagements">
                                                <i class="fa-solid fa-inbox fa-fw"></i>
                                                <span>{% trans "Engagements" %}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a>
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'active_engagements' %}">
                                                        {% trans "Active Engagements" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'all_engagements' %}">
                                                        {% trans "All Engagements" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'engagements_all' %}">
                                                        {{ labels.ASSET_ENGAGEMENTS_BY_LABEL }}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'test_type' %}">
                                                        {% trans "Test Types" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'dev_env' %}">
                                                        {% trans "Environments" %}
                                                    </a>
                                                </li>
                                            </ul>
                                            <!-- /.nav-second-level -->
                                        </li>
                                        <li>
                                            <a href="{% url 'open_findings' %}" aria-expanded="false" aria-label="Findings">
                                                <i class="fa-solid fa-bug fa-fw"></i>
                                                <span>{% trans "Findings" %}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a>
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'open_findings' %}">
                                                        {% trans "Open Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'all_findings' %}">
                                                        {% trans "All Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'closed_findings' %}">
                                                        {% trans "Closed Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'accepted_findings' %}">
                                                        {% trans "Risk Accepted Findings" %}
                                                    </a>
                                                </li>
                                                {% if "Finding_View"|has_global_permission %}
                                                    <li>
                                                        <a href="{% url 'templates' %}">
                                                            {% trans "Finding Templates" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                            <!-- /.nav-second-level -->
                                        </li>
                                        <li>
                                            <a href="{% url 'all_finding_groups' %}" aria-expanded="false" aria-label="Problems">
                                                <i class="fa-solid fa-triangle-exclamation fa-fw"></i>
                                                <span>{% trans "Finding Groups" %}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a> 
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'open_finding_groups' %}">
                                                        {% trans "Open Findings Groups" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'all_finding_groups' %}">
                                                        {% trans "All Findings Groups" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'closed_finding_groups' %}">
                                                        {% trans "Closed Findings Groups" %}
                                                    </a>
                                                </li>
                                            </ul>
                                            <!-- /.nav-second-level -->
                                        </li>
                                        <li>
                                            <a href="{% url 'components' %}" id="product_component_view" aria-expanded="false"  aria-label="Components">
                                                <i class="fa-solid fa-table-cells-large fa-fw"></i>
                                                <span>{% trans "Components" %}</span>
                                            </a>
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'components' %}">
                                                        {% trans "All Components" %}
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="{% url 'endpoint' %}" aria-expanded="false" aria-label="Endpoints">
                                                <i class="fa-solid fa-sitemap fa-fw"></i>
                                                <span>{% trans "Endpoints" %}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a>
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'endpoint' %}">
                                                        {% trans "All Endpoints" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'endpoint_host' %}">
                                                        {% trans "All Hosts" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'vulnerable_endpoints' %}">
                                                        {% trans "Vulnerable Endpoints" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'vulnerable_endpoint_hosts' %}">
                                                        {% trans "Vulnerable Hosts" %}
                                                    </a>
                                                </li>
                                                {% if request.user.is_superuser %}
                                                    <li>
                                                        <a href="{% url 'endpoint_migrate' %}">
                                                            {% trans "Migrate Endpoints" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </li>
                                        {% block reports_tab %}
                                        <li>
                                            <a href="{% url 'report_builder' %}" aria-expanded="false" aria-label="Reports">
                                                <i class="fa-solid fa-file-lines fa-fw"></i>
                                                <span>{% trans "Reports" %}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a>
                                            <!-- /.nav-second-level -->
                                        </li>
                                        {% endblock %}
                                        <li>
                                            <a href="{% url 'metrics' %}?date=5&view=dashboard" aria-expanded="false" aria-label="Metrics">
                                                <i class="fa-solid fa-chart-column fa-fw"></i>
                                                <span>{% trans "Metrics" %}</span>
                                                <span class="glyphicon arrow"></span>
                                            </a>
                                            <ul class="nav nav-second-level">
                                                <li>
                                                    <a href="{% url 'metrics' %}?date=5&view=dashboard">
                                                        {% trans "Metrics Dashboard" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'critical_product_metrics' %}">
                                                        {{ labels.ASSET_METRICS_CRITICAL_LABEL }}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'metrics_product_type' %}">
                                                        {{ labels.ORG_METRICS_LABEL }}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_type_counts' %}">
                                                        {{ labels.ORG_METRICS_COUNTS_LABEL }}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_tag_counts' %}">
                                                        {{ labels.ASSET_METRICS_TAG_COUNTS_LABEL }}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'simple_metrics' %}">
                                                        {% trans "Simple Metrics" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'engineer_metrics' %}">
                                                        {% trans "Engineer Metrics" %}
                                                    </a>
                                                </li>
                                            </ul>
                                            <!-- /.nav-second-level -->
                                        </li>
                                        {% if "auth.view_user"|has_configuration_permission:request or "auth.view_group"|has_configuration_permission:request %}
                                            <li>
                                                <a href="{% url 'users' %}" aria-disabled="true" aria-expanded="false" aria-label="Users" id="id_user_menu">
                                                    <i class="fa-solid fa-user fa-fw"></i>
                                                    <span>{% trans "Users" %}</span>
                                                    <span class="glyphicon arrow"></span>
                                                </a>
                                                <ul class="nav nav-second-level">
                                                    {% if "auth.view_user"|has_configuration_permission:request %}
                                                        <li>
                                                            <a href="{% url 'users' %}">
                                                                {% trans "Users" %}
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                    {% if "auth.view_group"|has_configuration_permission:request %}
                                                        <li>
                                                            <a href="{% url 'groups' %}"  id="id_group_menu">
                                                                {% trans "Groups" %}
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            </li>
                                        {% endif %}
                                        {% if system_settings.enable_calendar %}
                                        <li>
                                            <a href="{% url 'engagement_calendar' %}" aria-disabled="true" aria-expanded="false" aria-label="Calendar">
                                                <i class="fa-solid fa-calendar-days fa-fw"></i>
                                                <span>{% trans "Calendar" %}</span>
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if system_settings.enable_questionnaires %}
                                            {% if "dojo.view_engagement_survey"|has_configuration_permission:request or "dojo.view_question"|has_configuration_permission:request %}
                                                <li>
                                                    <a href="#">
                                                        <i class="fa-solid fa-house-medical-flag fa-fw"></i>
                                                        <span>{% trans "Questionnaires" %}</span>
                                                        <span class="glyphicon arrow"></span>
                                                    </a>
                                                    <ul class="nav nav-second-level">
                                                        {% if "dojo.view_engagement_survey"|has_configuration_permission:request  %}
                                                            <li>
                                                                <a href="{% url 'questionnaire' %}">
                                                                    {% trans "All Questionnaires" %}
                                                                </a>
                                                            </li>
                                                        {% endif %}
                                                        {% if "dojo.view_question"|has_configuration_permission:request %}
                                                            <li>
                                                                <a href="{% url 'questions' %}">
                                                                    {% trans "All Questions" %}
                                                                </a>
                                                            </li>
                                                        {% endif %}
                                                    </ul>
                                                    <!-- /.nav-second-level -->
                                                </li>
                                            {% endif %}
                                        {% endif %}
                                        <li id="menu_configuration">
                                            <a href="#" aria-expanded="false" aria-label="Configuration">
                                                <i class="fa-solid fa-gear fa-fw"></i>
                                                <span>{% trans "Configuration" %}</span>
                                            </a>
                                            <ul class="nav nav-second-level nav-up">
                                                {% if "dojo.change_announcement"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'configure_announcement' %}">
                                                            {% trans "Announcement" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if system_settings.enable_credentials and "dojo.view_cred_user"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'cred' %}">
                                                            {% trans "Credential Manager" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if system_settings.enable_github  and "dojo.view_github_conf"|has_configuration_permission:request%}
                                                    <li>
                                                        <a href="{% url 'github' %}">
                                                            {% trans "GitHub" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if system_settings.enable_jira and "dojo.view_jira_instance"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'jira' %}">
                                                            {% trans "JIRA" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if "dojo.change_bannerconf"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'configure_banner' %}">
                                                            {% trans "Login Banner" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if "dojo.view_note_type"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'note_type' %}">
                                                            {% trans "Note Types" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                <li>
                                                    <a href="{% url 'notifications' %}">
                                                        {% trans "Notifications" %}
                                                    </a>
                                                </li>
                                                {% if system_settings.enable_webhooks_notifications and "dojo.view_notification_webhooks"|has_configuration_permission:request %}
                                                <li>
                                                    <a href="{% url 'notification_webhooks' %}">
                                                        {% trans "Notification Webhooks" %}
                                                    </a>
                                                </li>
                                                {% endif %}
                                                <li>
                                                    <a href="{% url 'regulations' %}">
                                                        {% trans "Regulations" %}
                                                    </a>
                                                </li>
                                                {% if system_settings.enable_finding_sla and "dojo.view_sla_configuration"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'sla_config' %}">
                                                            {% trans "SLA Configuration" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if request.user.is_superuser %}
                                                    <li>
                                                        <a href="{% url 'system_settings' %}">
                                                            {% trans "System Settings" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if "dojo.view_tool_configuration"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'tool_config' %}">
                                                            {% trans "Tool Configuration" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if "dojo.view_tool_type"|has_configuration_permission:request %}
                                                    <li>
                                                        <a href="{% url 'tool_type' %}">
                                                            {% trans "Tool Type" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </li>
                                    {% endblock %}
                                    {% block support-tab %}
                                        <li>
                                            <a href="{% url 'support' %}" aria-disabled="true" aria-expanded="false" aria-label="Support">
                                                <i class="fa-solid fa-level-up fa-fw"></i>
                                                <span>{% trans "Upgrade" %}</span>
                                            </a>
                                        </li>
                                    {% endblock %}
                                    <li id="min-menu">
                                        <a href="#" id="minimize-menu" title="Expand/Collapse Menu" aria-label="Expand/Collapse Menu">
                                            <i id="nav-minimize-menu-li" class="fa-solid fa-circle-right fa-fw"></i>
                                            <span>{% trans "Collapse Menu" %}</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.sidebar-collapse -->
                        </div>
                    <!-- /.navbar-static-side -->
                    {% endif %}
                </nav>
            {% endblock %}
            <!-- Page Content -->
            <div id="page-wrapper">
                {% if request.user.is_authenticated and announcement %}
                    {% load announcement_banner_tags %}
                    <div role="alert" class="announcement-banner alert alert-{{ announcement.style }} {% if announcement.dismissable %}alert-dismissible{% endif %} show">
                    {% if announcement.dismissable %}
                        <a href="{% url 'dismiss_announcement' %}" class="close" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </a>
                    {% endif %}
                    {{ announcement.message|bleach_announcement_message }}
                    </div>
                {% endif %}
                <div class="container-fluid">
                    <!-- start of tabs -->
                    {% block tab_bar %}
                        {% if product_tab.tab %}
                            <div class="row">
                                <div class="col-md-12">
                                    <h3 class="no-margin-top" style="padding-bottom: 5px;">
                                        {{ product_tab.product }}
                                        {% if system_settings.enable_benchmark == 9 %}
                                            {% for benchmark in tab_benchmarks%}
                                                <sup><span class="fa-solid fa-bookmark has-popover" data-trigger="hover" data-content="{{ benchmark|asvs_level }}"></span>
                                                {{ benchmark.desired_level }}</sup>
                                            {% endfor %}
                                        {% endif %}
                                        {% with grade=product_tab.product|product_grade %}
                                            {% if grade %}
                                                <sup><div class="tag-label {{ grade }}">{{ grade }}</div></sup>
                                            {% endif %}
                                        {% endwith %}
                                        {% include "dojo/snippets/tags.html" with tags=product_tab.product.tags.all.all %}
                                    </h3>
                                    <ul class="nav nav-tabs horizontal-bar in">
                                        <li role="presentation"{% if product_tab.tab == 'overview' %} class="active"{% endif %}>
                                            <a href="{% url 'view_product' product_tab.product.id %}">
                                                <span class="fa-solid fa-earth-americas" aria-hidden="true"></span>
                                                <span class="hidden-xs">{% trans "Overview" %}</span>
                                            </a>
                                        </li>
                                        <li role="presentation"{% if product_tab.tab == 'components' %} class="active"{% endif %}>
                                            <a href="{% url 'view_product_components' product_tab.product.id %}">
                                                <span class="fa-solid fa-table-cells-large" aria-hidden="true"></span>
                                                <span class="hidden-xs">{% trans "Components" %}</span>
                                            </a>
                                        </li>
                                        <li role="presentation"{% if product_tab.tab == 'metrics' %} class="active"{% endif %}>
                                            <a href="{% url 'view_product_metrics' product_tab.product.id %}">
                                                <span class="fa-solid fa-chart-column" aria-hidden="true"></span>
                                                <span class="hidden-xs">{% trans "Metrics" %}</span>
                                            </a>
                                        </li>
                                        <!-- Engagements Tab -->
                                        <li role="presentation" class="dropdown{% if product_tab.tab == 'engagements' %} active active-color{% endif %}">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="">
                                                <span class="fa-solid fa-calendar-days" aria-hidden="true"></span>
                                                <span class="hidden-xs">{% trans "Engagements" %}
                                                    {% if product_tab.engagements > 0 %}
                                                        <span class="badge">{{ product_tab.engagements }}</span>
                                                    {% endif %}
                                                </span>
                                                <span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="{% url 'view_engagements' product_tab.product.id %}">
                                                        <i class="fa-solid fa-calendar-days"></i>
                                                        {% trans "View Engagements" %}
                                                    </a>
                                                </li>
                                                {% if product_tab.product|has_object_permission:"Engagement_Add" %}
                                                    <li role="separator" class="divider"></li>
                                                    <li>
                                                        <a href="{% url 'new_eng_for_prod' product_tab.product.id %}">
                                                            <i class="fa-solid fa-plus"></i>
                                                            {% trans "Add New Interactive Engagement" %}
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="{% url 'new_eng_for_prod_cicd' product_tab.product.id %}">
                                                            <i class="fa-solid fa-plus"></i>
                                                            {% trans "Add New CI/CD Engagement" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </li>
                                        <!-- Findings Tab -->
                                        <li role="presentation" class="dropdown{% if product_tab.tab == 'findings' %} active active-color{% endif %}">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="">
                                                <span class="fa-solid fa-bug" aria-hidden="true"></span>
                                                <span class="hidden-xs">
                                                    {% trans "Findings" %}
                                                    {% if product_tab.findings > 0 %}
                                                        <span class="badge">{{ product_tab.findings }}</span>
                                                    {% endif %}
                                                </span>
                                                <span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="{% url 'product_open_findings' product_tab.product.id %}">
                                                        <i class="fa-solid fa-rectangle-list"></i>
                                                        {% trans "View Active Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_open_findings' product_tab.product.id %}?verified=true">
                                                        <i class="fa-solid fa-rectangle-list"></i>
                                                        {% trans "View Active Verified Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_open_findings' product_tab.product.id %}?severity=Critical">
                                                        <i class="fa-solid fa-triangle-exclamation"></i>
                                                        {% trans "View Critical Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_open_findings' product_tab.product.id %}?date=2">
                                                        <i class="fa-solid fa-calendar-days"></i>
                                                        {% trans "View Findings from Last 7 Days" %}
                                                    </a>
                                                </li>
                                                <li role="separator" class="divider"></li>
                                                <li>
                                                    <a href="{% url 'product_accepted_findings' product_tab.product.id %}">
                                                        <i class="fa-solid fa-check"></i>
                                                        {% trans "View Risk Accepted Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_all_findings' product_tab.product.id %}">
                                                        <i class="fa-solid fa-magnifying-glass"></i>
                                                        {% trans "View All Findings" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'product_closed_findings' product_tab.product.id %}">
                                                        <i class="fa-solid fa-fire-extinguisher"></i>
                                                        {% trans "View Closed Findings" %}
                                                    </a>
                                                </li>
                                                {% if product_tab.product|has_object_permission:"Finding_Add" %}
                                                    <li role="separator" class="divider"></li>
                                                    <li>
                                                        <a href="{% url 'ad_hoc_finding' product_tab.product.id %}">
                                                            <i class="fa-solid fa-plus"></i>
                                                            {% trans "Add New Finding" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if product_tab.product|has_object_permission:"Import_Scan_Result" %}
                                                    <li>
                                                        <a href="{% url 'import_scan_results_prod' product_tab.product.id %}">
                                                            <i class="fa-solid fa-upload"></i>
                                                            {% trans "Import Scan Results" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </li>
                                        <!-- Endpoints Tab -->
                                        <li role="presentation" class="dropdown{% if product_tab.tab == 'endpoints' %} active active-color{% endif %}">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="">
                                                <span class="fa-solid fa-sitemap" aria-hidden="true"></span>
                                                <span class="hidden-xs">
                                                    {% trans "Hosts / Endpoints" %}
                                                    <span class="badge">{{ product_tab.endpoint_hosts }} / {{ product_tab.endpoints }}</span>
                                                </span>
                                                <span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="{% url 'endpoint' %}?product={{ product_tab.product.id }}">
                                                        <i class="fa-solid fa-rectangle-list"></i>
                                                        {% trans "View Endpoints" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'endpoint_host' %}?product={{ product_tab.product.id }}">
                                                        <i class="fa-solid fa-rectangle-list"></i>
                                                        {% trans "View Hosts" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'vulnerable_endpoints' %}?product={{ product_tab.product.id }}">
                                                        <i class="fa-solid fa-sitemap"></i>
                                                        {% trans "View Vulnerable Endpoints" %}
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{% url 'vulnerable_endpoint_hosts' %}?product={{ product_tab.product.id }}">
                                                        <i class="fa-solid fa-sitemap"></i>
                                                        {% trans "View Vulnerable Hosts" %}
                                                    </a>
                                                </li>
                                                <li role="separator" class="divider"></li>
                                                <li>
                                                    <a href="{% url 'product_endpoint_report' product_tab.product.id %}">
                                                        <i class="fa-solid fa-file-lines"></i>
                                                        {% trans "Endpoint Report" %}
                                                    </a>
                                                </li>
                                                {% if product_tab.product|has_object_permission:"Endpoint_Add" %}
                                                    <li role="separator" class="divider"></li>
                                                    <li>
                                                        <a href="{% url 'add_endpoint' product_tab.product.id %}">
                                                            <i class="fa-solid fa-plus"></i>
                                                            {% trans "Add New Endpoint" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                                {% if product_tab.product|has_object_permission:"Endpoint_Edit" and system_settings.enable_endpoint_metadata_import %}
                                                    <li>
                                                        <a href="{% url 'import_endpoint_meta' product_tab.product.id %}">
                                                            <i class="fa-solid fa-upload"></i>
                                                            {% trans "Import Endpoint Meta" %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </li>
                                        <!-- Benchmarks Tab -->
                                        {% if system_settings.enable_benchmark %}
                                            {% if product_tab.product|has_object_permission:"Benchmark_Edit" %}
                                                <li role="presentation" class="dropdown{% if product_tab.tab == 'benchmarks' %} active{% endif %}">
                                                    <a class="dropdown-toggle" data-toggle="dropdown" href="">
                                                        <span class="fa-solid fa-scale-balanced" aria-hidden="true"></span>
                                                        <span class="hidden-xs">{% trans "Benchmarks" %}</span>
                                                        <span class="caret"></span>
                                                    </a>
                                                    <ul class="dropdown-menu">
                                                        {% for bt in product_tab.benchmark_type %}
                                                            <a title="{{ bt.name }}" href="{% url 'view_product_benchmark' product_tab.product.id bt.id %}">
                                                                <li>
                                                                    <span class="fa-solid fa-list-ul"></span>
                                                                    {{ bt.name }} {{ bt.version }}
                                                                </a>
                                                                <!-- the order is swithced here for some reason, but it looks bad the "correct" way -->
                                                            </li>
                                                        {% endfor %}
                                                    </ul>
                                                </li>
                                            {% endif %}
                                        {% endif %}
                                        <!-- Product Settings Tab -->
                                        {% if product_tab.product|has_object_permission:"Product_Edit" or product_tab.product|has_object_permission:"Product_Delete" %}
                                            <li role="presentation" class="dropdown{% if product_tab.tab == 'settings' %} active{% endif %}">
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="">
                                                    <span class="fa-solid fa-gears" aria-hidden="true"></span>
                                                    <span class="hidden-xs">{% trans "Settings" %}</span>
                                                    <span class="caret"></span></a>
                                                <ul class="dropdown-menu">
                                                    {% if product_tab.product|has_object_permission:"Product_Edit" %}
                                                        <li role="presentation">
                                                            <a class="" href="{% url 'edit_product' product_tab.product.id %}">
                                                                <i class="fa-solid fa-pen-to-square"></i>
                                                                {% trans "Edit" %}
                                                            </a>
                                                        </li>
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a class="" href="{% url 'add_meta_data' product_tab.product.id %}">
                                                                <i class="fa-solid fa-plus"></i>
                                                                {% trans "Add Custom Fields" %}
                                                            </a>
                                                        </li>
                                                        <li role="presentation">
                                                            <a title="Edit Custom Fields" href="{% url 'edit_meta_data' product_tab.product.id %}">
                                                                <i class="fa-solid fa-pen-to-square"></i>
                                                                {% trans "Edit Custom Fields" %}
                                                            </a>
                                                        </li>
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a class="" href="{% url 'add_api_scan_configuration' product_tab.product.id %}">
                                                                <i class="fa-solid fa-plus"></i>
                                                                {% trans "Add API Scan Configuration" %}
                                                            </a>
                                                        </li>
                                                        <li role="presentation">
                                                            <a title="View API Scan Configurations" href="{% url 'view_api_scan_configurations' product_tab.product.id %}">
                                                                <i class="fa-solid fa-rectangle-list"></i>
                                                                {% trans "View API Scan Configurations" %}
                                                            </a>
                                                        </li>
                                                        {% if system_settings.enable_product_tracking_files %}
                                                            <li role="separator" class="divider"></li>
                                                            <li role="presentation">
                                                                <a class="" href="{% url 'new_object' product_tab.product.id %}">
                                                                    <i class="fa-solid fa-plus"></i>
                                                                    {% trans "Add Tracked File" %}
                                                                </a>
                                                            </li>
                                                            <li role="presentation">
                                                                <a href="{% url 'view_objects' product_tab.product.id %}">
                                                                    <i class="fa-solid fa-rectangle-list"></i>
                                                                    {% trans "View Tracked Files" %}
                                                                </a>
                                                            </li>
                                                        {% endif %}
                                                        {% if system_settings.enable_credentials %}
                                                            <li role="separator" class="divider"></li>
                                                            <li role="presentation">
                                                                <a href="{% url 'new_cred_product' product_tab.product.id %}">
                                                                    <i class="fa-solid fa-plus"></i>
                                                                    {% trans "Add Credentials" %}
                                                                </a>
                                                            </li>
                                                            <li role="presentation">
                                                                <a href="{% url 'all_cred_product' product_tab.product.id %}">
                                                                    <i class="fa-solid fa-rectangle-list"></i>
                                                                    {% trans "View Credentials" %}
                                                                </a>
                                                            </li>
                                                        {% endif %}
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a href="{% url 'new_tool_product' product_tab.product.id %}">
                                                                <i class="fa-solid fa-plus"></i>
                                                                {% trans "Add Tools" %}
                                                            </a>
                                                        </li>
                                                        <li role="presentation">
                                                            <a href="{% url 'all_tool_product' product_tab.product.id %}">
                                                                <i class="fa-solid fa-rectangle-list"></i>
                                                                {% trans "View Tools" %}
                                                            </a>
                                                        </li>
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a href="{% url 'add_engagement_presets' product_tab.product.id %}">
                                                                <i class="fa-solid fa-plus"></i>
                                                                {% trans "Add Engagement Presets" %}
                                                            </a>
                                                        </li>
                                                        <li role="presentation">
                                                            <a href="{% url 'engagement_presets' product_tab.product.id %}">
                                                                <i class="fa-solid fa-rectangle-list"></i>
                                                                {% trans "View Engagement Presets" %}
                                                            </a>
                                                        </li>
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a href="{% url 'action_history' product_tab.product|content_type product_tab.product.id %}">
                                                                <i class="fa-solid fa-clock-rotate-left"></i>
                                                                {% trans "View History" %}
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                    {% if product_tab.product|has_object_permission:"Product_Delete" %}
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a class="text-danger" href="{% url 'delete_product' product_tab.product.id %}">
                                                                <i class="fa-solid fa-trash"></i>
                                                                {% trans "Delete" %}
                                                            </a>
                                                        </li>
                                                    {% endif %}
                                                </ul>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        {% else %}
                            <div class="row hidden-xs">
                                <div class="col-lg-12">
                                    {% if request.session.dojo_breadcrumbs %}
                                        <ul class="breadcrumb main">
                                            {% for crumb in request.session.dojo_breadcrumbs %}
                                                <li class="{% if forloop.last %}active{% endif %}">
                                                    <a class="{% if forloop.last %}active{% endif %}" href="{{ crumb.url }}">{{ crumb.title }}</a>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    {% endblock %}
                    <!-- end of tabs -->
                    {% if messages %}
                    <div class="row">
                        <div class="col-lg-12">
                                {% for message in messages %}
                                    <div class="alert {{ message.tags }} alert-dismissible" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        {{ message }}
                                    </div>
                                {% endfor %}
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                    {% endif %}
                    <!-- /.row -->
                    <div class="row">
                        <div id="base-content" class="col-lg-12">
                            {% include "dojo/breadcrumbs/settings_breadcrumb.html" %}
                            {% include "dojo/breadcrumbs/engagement_breadcrumb.html" %}
                            {% include "dojo/breadcrumbs/finding_breadcrumb.html" %}
                            {% include "dojo/breadcrumbs/endpoint_breadcrumb.html" %}
                            {% include "dojo/breadcrumbs/custom_breadcrumb.html" %}
                            {% block content %}
                            {% endblock %}
                        </div>
                        <!-- /.col-lg-12 -->
                    </div>
                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- /#page-wrapper -->

            <!-- .dojo-modals-wrapper -->
            <div id="dojo-modals-wrapper" class="dojo-modals-wrapper">
            {% block modals %}
            {% endblock %}
            </div>
            <!-- /.dojo-modals-wrapper -->

            <!-- Session Timeout Modal -->
            <div class="modal fade" id="sessionTimeoutModal" tabindex="-1" role="dialog" aria-labelledby="sessionModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="sessionModalLabel">Session Expiring Soon</h4>
                    </div>
                    <div class="modal-body">
                        Your session is about to expire due to inactivity.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
                </div>
            </div>

            <!-- #footer-wrapper -->
            <div id="footer-wrapper">
            {% block footer %}
                <footer class="footer">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 text-center text-">
                                <p>
                                    <a href="{% url 'home' %}">
                                        <img class="logo" src="{% static "dojo/img/chop.png" %}" alt="{% trans "DefectDojo Chop" %}" height="45"/>
                                    </a>
                                    <br/>
                                    <br/>
                                    {% dojo_version %} ( {% dojo_current_hash %} )
                                </p>
                                <p>
                                    Detailed DefectDojo documentation can be found in our <a
                                        href="{% dojo_docs_url %}">GitHub Pages</a>.
                                </p>
                                <p>
                                    DefectDojo is licensed under the <a
                                        href="https://github.com/DefectDojo/django-DefectDojo/blob/master/LICENSE.md">3-Clause BSD
                            License</a>. | <a href="https://github.com/DefectDojo/django-DefectDojo/blob/master/NOTICE"> Dependencies Notice.</a>
                                </p>
                                <p>
                                    &copy; 2015-{% now "Y" %} DefectDojo, Inc. All rights reserved. DefectDojo is trademark of DefectDojo, Inc.
                                </p>
                            </div>
                        </div>
                    </div>
                </footer>
            {% endblock %}
            </div>
            <!-- /#footer-wrapper -->
        </div>

        <!-- /#wrapper -->

        <!-- our JS -->
        <script src="{% static "dojo/js/index.js" %}"></script>

        <!-- our CVSS stuff -->
        <script src="{% static "dojo/js/cvsscalc31_helptext.js" %}"></script>
        <script src="{% static "dojo/js/cvsscalc31.js" %}"></script>
        <script src="{% static "dojo/js/cvss_calculator.js" %}"></script>
        <script type="application/javascript">
            $(document).ready(function() {
                $('.has-popover').hover(
                    function() { $(this).popover('show'); }, // hover
                    function() { $(this).popover('hide'); } // unhover
                );

                {% if request.user.is_authenticated %}
                    function session_notifcation() {
                        var warningTime = "{{ session_notify_time|default:0|escapejs }}"; // When the warning will show
                        var currentTime = Math.floor(Date.now() / 1000);  // Get current timestamp in seconds
                        var timeout = warningTime - currentTime; // how many seconds until warning needs to show

                        setTimeout(() => {
                            $('#sessionTimeoutModal').modal('show');
                        }, Math.min(timeout, 2147483) * 1000); // Do not allow a buffer overflow here

                    }
                    session_notifcation();
                    $('#sessionTimeoutModal').on('show.bs.modal', function (event) {
                        $(this).attr('aria-hidden', 'false');
                    })
                    $('#sessionTimeoutModal').on('hidden.bs.modal', function (event) {
                        $(this).attr('aria-hidden', 'true');
                    })
                {% endif %}

                {% if request.user.is_authenticated and not 'DISABLE_ALERT_COUNTER'|setting_enabled %}
                    function get_alerts() {
                        $('.dropdown-alerts').html('<div class="text-center"><i class="fa-solid fa-spinner fa-spin"></i></div>');
                        $.get("{% url 'alerts_json' %}?limit=12", function (data) {
                            $('.dropdown-alerts').empty();
                            $.each(data, function(i, elem) {
                            var titleField = elem.fields.title ? elem.fields.title : elem.fields.description;
                            var display_title = titleField.length < 50 ? titleField : titleField.trim().substring(0,50).trim(this) + '...';
                            var description = elem.fields.description
                            var display_description = description ? description.length < 100 ? description : description.trim().substring(0,100).trim(this) + '...': ''
                            var dropdown_alert = "alert-list" + i;
                            $('.dropdown-alerts').append('<li><div style="padding: 3px 20px;"><i class="fa-solid fa-' + htmlEscape(elem.fields.icon) +
                                                            ' fa-fw"></i><a href="' + htmlEscape(elem.fields.url) + '" id=' + dropdown_alert +
                                                            ' title="' + htmlEscape(display_description) + '"></a><span class="pull-right text-muted small">' +
                                                        htmlEscape(elem.fields.source) + '</span></div></li><li class="divider"></li>');
                            $("#" + dropdown_alert).text(display_title);
                            });

                            if (data.length > 0) {
                                $('.dropdown-alerts').append('<li><a class="text-center" href="{% url "alerts" %}"><strong>{% trans "See All Alerts" %}</strong>' +
                                                            '<i class="fa-solid fa-angle-right"></i></a></li>');
                                $('.dropdown-alerts').append('<li><a class="text-center" href="{% url "delete_alerts" %}"><strong>{% trans "Clear All Alerts" %}</strong>' +
                                                        '<i class="fa-solid fa-angle-right"></i></a></li>');
                            }
                            else {
                                $('.dropdown-alerts').append('<li class="text-center"><strong>{% trans "No alerts found" %}</strong></li>');
                            }
                        });
                        update_alertcount()
                    }
                    function update_alertcount() {
                        $.get("{% url 'alertcount' %}", function (data) {
                            if (data.count != $('#alert_count').text()) {
                                $('#alert_count').text(data.count);
                                $('#alert_count').removeClass().addClass('badge badge-count badge-count' + data.count);
                            }
                        });
                    }

                    $('.dropdown-toggle-alerts').click(function() {
                        get_alerts();
                    });

                {% if 'ALERT_REFRESH'|setting_enabled %}
                    setInterval(function() {
                        update_alertcount();
                    }, 10000);
                {% else %}
                    update_alertcount();
                {% endif %}
                {% endif %}

                function htmlEscape(str) {
                    if (!str) {
                        return '';
                    }
                    return str
                        .replace(/\n/g, " ")
                        .replace(/&/g, '&amp;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#39;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;');
                }

                $("#id_jiraform-jira_issue").on('paste', function(e) {
                    var clipboardData = e.clipboardData || e.originalEvent.clipboardData || window.clipboardData;
                    var pastedData = clipboardData.getData('text');

                    $this = $(this)
                    // if someone entered/pasted a full URL, we strip evertyhing until last '/'
                    setTimeout(function (elem) {
                        $this.val($this.val().substring($this.val().lastIndexOf("/") + 1));
                    }, 100);
                });

                <!-- TODO not working with django tagulous which uses select2, break styling -->
                <!-- $('#id_tags').select2({ -->
                    <!-- 'placeholder': 'Select or add some tags...', -->
                    <!-- 'no_results_text': "Tag not found, press TAB key to add.", -->
                <!-- }); -->

                $('select').not('#notification-scope').addClass('selectpicker');
                $('.selectpicker').attr('data-live-search', 'true');
                $('.selectpicker').attr('data-container', 'body');
                $('.selectpicker').css('width', '70%');
                $('.selectpicker').selectpicker('render');

            });
        </script>
        {% block extra_javascript %}
        {% endblock %}
        {% block postscript %}
        {% endblock %}
    </body>
</html>
